<template>
	<div class="process-stat-report">
		<!-- 核心指标卡片 -->
		<el-row :gutter="18" style="margin-bottom:16px;">
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">总体良品率</div>
					<div class="stat-value">{{ metrics.passRate }}%</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">不良品率</div>
					<div class="stat-value">{{ metrics.ngRate }}%</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">返工率</div>
					<div class="stat-value">{{ metrics.reworkRate }}%</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">累计工序数</div>
					<div class="stat-value">{{ metrics.totalProcess }}</div>
				</el-card>
			</el-col>
		</el-row>

		<el-card>
			<div style="font-weight:bold;margin-bottom:12px;">各工序统计明细</div>
			<el-table :data="processStats" border size="small">
				<el-table-column prop="process" label="工序" width="120" />
				<el-table-column prop="pass" label="良品数" width="100" />
				<el-table-column prop="ng" label="不良品数" width="100" />
				<el-table-column prop="rework" label="返工数" width="100" />
				<el-table-column prop="total" label="合计" width="100" />
				<el-table-column prop="rate" label="良品率" width="110">
					<template #default="scope">
						<el-tag :type="scope.row.rate > 95 ? 'success' : (scope.row.rate > 90 ? 'warning' : 'danger')">
							{{ scope.row.rate }}%
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
			</el-table>
		</el-card>
		<el-card style="margin-top:18px;">
			<div style="font-weight:bold;margin-bottom:12px;">良品率/不良品率趋势</div>
			<div ref="trendRef" style="width:100%;height:320px;"></div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 总体指标
const metrics = {
	passRate: 96.8,
	ngRate: 2.1,
	reworkRate: 1.1,
	totalProcess: 8
}

// 工序统计模拟数据
const processStats = [
	{ process: '原料称量', pass: 1260, ng: 21, rework: 6, total: 1287, rate: 97.9, remark: '' },
	{ process: '混合', pass: 1240, ng: 31, rework: 11, total: 1282, rate: 96.7, remark: '' },
	{ process: '制粒', pass: 1205, ng: 53, rework: 19, total: 1277, rate: 94.4, remark: '' },
	{ process: '压片', pass: 1230, ng: 41, rework: 9, total: 1280, rate: 96.1, remark: '' },
	{ process: '包衣', pass: 1258, ng: 19, rework: 8, total: 1285, rate: 97.9, remark: '' },
	{ process: '检验', pass: 1267, ng: 12, rework: 3, total: 1282, rate: 98.8, remark: '关键工序' },
	{ process: '装瓶', pass: 1264, ng: 13, rework: 5, total: 1282, rate: 98.6, remark: '' },
	{ process: '包装', pass: 1256, ng: 22, rework: 6, total: 1284, rate: 97.8, remark: '' }
]

// 良品/不良率趋势（近14天）
const trendData = [
	{ date: '06-01', pass: 97.2, ng: 2.0 },
	{ date: '06-02', pass: 96.8, ng: 2.4 },
	{ date: '06-03', pass: 96.9, ng: 2.2 },
	{ date: '06-04', pass: 97.0, ng: 2.0 },
	{ date: '06-05', pass: 96.4, ng: 2.6 },
	{ date: '06-06', pass: 97.5, ng: 1.9 },
	{ date: '06-07', pass: 97.1, ng: 2.3 },
	{ date: '06-08', pass: 96.6, ng: 2.5 },
	{ date: '06-09', pass: 97.2, ng: 2.0 },
	{ date: '06-10', pass: 96.8, ng: 2.2 },
	{ date: '06-11', pass: 97.3, ng: 1.7 },
	{ date: '06-12', pass: 97.6, ng: 1.6 },
	{ date: '06-13', pass: 97.1, ng: 2.2 },
	{ date: '06-14', pass: 96.7, ng: 2.4 }
]

const trendRef = ref()
let chart1

function renderTrend() {
	if (!chart1 && trendRef.value) chart1 = echarts.init(trendRef.value)
	if (!chart1) return
	chart1.setOption({
		tooltip: { trigger: 'axis' },
		legend: { data: ['良品率', '不良品率'] },
		grid: { left: 44, right: 20, top: 40, bottom: 36, containLabel: true },
		xAxis: { type: 'category', data: trendData.map(d => d.date) },
		yAxis: { type: 'value', min: 0, max: 100, axisLabel: { formatter: '{value}%' } },
		series: [
			{
				name: '良品率',
				type: 'line',
				data: trendData.map(d => d.pass),
				smooth: true,
				lineStyle: { width: 2, color: '#67C23A' },
				areaStyle: { color: '#E8F6EA' }
			},
			{
				name: '不良品率',
				type: 'line',
				data: trendData.map(d => d.ng),
				smooth: true,
				lineStyle: { width: 2, color: '#F56C6C' },
				areaStyle: { color: '#FDECEA' }
			}
		]
	})
}

onMounted(() => {
	setTimeout(renderTrend, 20)
})
</script>

<style scoped>
.process-stat-report {
	padding: 16px;
}

.stat-title {
	font-size: 1em;
	color: #888;
	margin-bottom: 8px;
}

.stat-value {
	font-size: 2em;
	color: #409EFF;
	font-weight: bold;
	text-align: center;
}
</style>
  
